import React, { ReactElement, useState } from 'react'
import css from '../../assets/styles/home.less'
import MyMeau from '../../components/MyMeau'
import MyHeader from '../../components/MyHeader'
import MyBreadNav from '../../components/MyBreadNav'
import { Layout } from 'antd';
const { Content, Footer, Sider } = Layout;
interface Props {
  children: object
}

export default function Home({ children }: Props): ReactElement {
  const [collapsed, setCollapsed] = useState(false)

  function onCollapse(collapsed: boolean | ((prevState: boolean) => boolean)) {
    setCollapsed(collapsed)
  }
  return (
    <div className={css.home}>
      <Layout style={{ minHeight: '100vh' }}>
        {/* 头部logo */}
        <div className={css.logo1}>
          {/* 菜大厨 */}
        </div>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className={css.logo}>
          </div>
          {/* 菜单 */}
          <MyMeau></MyMeau>
        </Sider>
        <Layout className="site-layout">
          <MyHeader></MyHeader>
          <Content style={{ margin: '0 16px' }}>
            {/* 面包导航 */}
            <MyBreadNav></MyBreadNav>
            {/* 内容路由出口注册路由 */}
            {children}
          </Content>
          <Footer style={{ textAlign: 'center' }}>菜谱 ©2021 Created by Lin</Footer>
        </Layout>
      </Layout>
    </div>



















  )
}
